<template>
  <div class="app-container">
    <el-row :gutter="5">
      <el-col :span="4" :offset="1"><el-button type="primary" @click="newStudent">新建student<i class="el-icon-edit el-icon--right"></i></el-button></el-col>
      <el-col :span="4" :offset="0"><el-button type="primary" @click="batchSaveStudent">批量导入student<i class="el-icon-edit el-icon--right"></i></el-button></el-col>
    </el-row>
    <el-table
      :data="list.filter(data => !search || data.studentName.toLowerCase().includes(search.toLowerCase()))"
      stripe
      style="width: 90%;margin: 20px auto 20px auto"
      height="650"
      border>
      <el-table-column
        label="id"
        prop="studentId">
      </el-table-column>
      <el-table-column
        label="学生姓名"
        prop="studentName">
      </el-table-column>
      <el-table-column
        label="性别"
        prop="sex">
      </el-table-column>
      <el-table-column
        label="联系方式"
        prop="telephone">
      </el-table-column>
      <el-table-column
        label="地址"
        prop="address">
      </el-table-column>
      <el-table-column
        v-if="false"
        label="roles"
        prop="roles">
      </el-table-column>
      <el-table-column
        label="自我介绍"
        prop="introduction">
      </el-table-column>
      <el-table-column
        v-if="false"
        label="avatar"
        prop="avatar">
      </el-table-column>
      <el-table-column
        v-if="false"
        label="job"
        prop="job">
      </el-table-column>
      <el-table-column
        label="小组名称"
        prop="sgroup">
      </el-table-column>
      <el-table-column
        v-if="false"
        label="sclass"
        prop="sclass">
      </el-table-column>
      <el-table-column
        align="right"
        style="width: 30%">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            :key="scope"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="number>0" :total="number" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-row  :gutter="20">
      <el-col :span="3"><label>学生总数:</label></el-col>
      <el-col :span="2"><span>{{number}}</span></el-col>
    </el-row>
    <div v-bind:key="index" v-for="(value, name, index) in list">
      {{ index }}. {{ name }}: {{ value }}
    </div>
  </div>
</template>

<script>
import { fetchList, deleteStudent } from '@/api/student'
import Pagination from '@/components/Pagination'
export default {
  name: 'StudentList',
  components: { Pagination },
  filters: {
  },
  data() {
    return {
      search: '',
      list: [],
      number: 0,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
      this.$router.push({ name: 'student-detail', params: row })
    },
    handleDelete(index, row) {
      console.log(index, row)
      row.upclass = 0
      deleteStudent(row).then(response => {
        this.$message({
          message: '删除成功' + response.data.studentName,
          type: 'warning'
        })
        this.getList()
      })
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.content
        this.number = response.data.totalElements

        // Just to simulate the time of the request
      /*      setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000) */
      })
    },
    newStudent() {
      this.$router.push({ path: '/student/student-detail/' })
    },
    batchSaveStudent() {
      this.$router.push({ path: '/student/batch-save/' })
    }
  }
}
</script>
